<template>
    <div class="table-page">
        <div class="table-search-box">
            <div class="search-item">
                <label>名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="角色名"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索</el-button
                >
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('添加角色', selectAllAction)"
                >新增数据</el-button
            >
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column
                    prop="id"
                    label="id"
                    width="120"
                ></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            type="primary"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(scope.row, '数据编辑', () => {})
                            "
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="warning"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/cu/auth/action/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree, beanCopy } from "@/utils/index.js";
export default {
    name: "LoginInfo",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: ""
            }
        };
    },
    computed: {
        ...mapState({})
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/auth/action/list", queryData);
        }
    }
};
</script>

<style lang="scss" scoped></style>
